import React, { PureComponent } from 'react'
import withRouter from '../../hoc/withRouter'
import { Outlet } from 'react-router-dom'
export class HomeRecommand extends PureComponent {
  constructor() {
    super()

    this.state = {
      recommandList: [
        {
          name: '推荐歌单1',
          id: 0
        },
        {
          name: '推荐歌单2',
          id: 1
        },
        {
          name: '推荐歌单3',
          id: 2
        },
        {
          name: '推荐歌单4',
          id: 3
        },
        {
          name: '推荐歌单5',
          id: 4
        }
      ]
    }
  }

  navigateToDetail(id) {
    const { navigate } = this.props.router
    navigate('/home/recommand/detail/' + id)
  }

  render() {
    const { recommandList } = this.state
    return (
      <div>
        首页推荐
        <ul>
          {
            recommandList.map((item,index) => {
              return <li key={index} onClick={e => this.navigateToDetail(item.id)}> {item.name} </li>
            })
          }
        </ul>
        <Outlet />
      </div>
    )
  }
}

export default withRouter(HomeRecommand)